<template>
  <view>
    <view class="header">
      <Navbar title="商城" backgroundColor="transparent" color="#fff" :fixed="false" />
      <view class="header__box">
        <view class="search yd-flex-h-hC-vC">
          <image class="search__icon" src="~@/static/searchIcon.png"/>
          <input class="yd-flex-1" placeholder="搜索商品" />
          <text>搜索</text>
        </view>
        <swiper class="swiper" >
          <swiper-item class="swiper__item">
            <image class="swiper__image" src="https://gd-filems.dancf.com/xi19e5/cms/mcm79j/mcm79j/53357/92c0218a-db83-4a0a-8815-fefc0465a631752522.jpg?x-oss-process=image/resize,h_600/interlace,1,image/format,webp"  />
          </swiper-item>
          <swiper-item class="swiper__item">
            <image class="swiper__image" src="https://gd-filems.dancf.com/xi19e5/cms/mcm79j/mcm79j/38253/cbf05356-a642-418f-a1c1-117f2bb2e0fe413203.jpg?x-oss-process=image/resize,h_600/interlace,1,image/format,webp"  />
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="flow-container">
      <FlowList @imageClick="detail" :value="list" :columnSpace="1.6">
        <view @tap="detail(item)" class="item" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
          <view class="item__name">{{ item.title }}</view>
          <view class="yd-flex-h-hS-vC">
            <view class="yd-flex-v">
              <text class="item__price">￥{{ item.price }}</text>
              <text>{{ item.person }} 人购买</text>
            </view>
            <image class="item__icon" src="~@/static/shop/addCar.png" />
          </view>
        </view>
      </FlowList>
    </view>
  </view>
</template>

<script>
import FlowList from './FlowList.vue';
export default {
  components: { FlowList },
  data() {
    return {
      list: [
        {
          image: 'https://img1.360buyimg.com/n6/jfs/t1/32679/33/20887/186750/640a81afF3ddd8f89/03e2d91c12c0c46a.jpg',
          title: '简朵 i5 10400F升八核/GTX1650 4G/16G内存游戏台式吃鸡电脑主机DIY组装机',
          price: '2468.00',
          person: 186
        },
        {
          image: 'https://img1.360buyimg.com/n6/jfs/t1/161169/10/31065/84296/635014d7E08a873c2/bef5da58538652fc.jpg',
          title: '荣耀笔记本电脑MagicBook 14 2022 12代酷睿高性能轻薄本 标压i5-12500H 16G 512G 20h长续航 2.1K护眼屏 灰',
          price: '4298.00',
          person: 16000
        },
        {
          image: 'https://img1.360buyimg.com/n6/jfs/t1/181658/34/33205/87869/6403106cF3a40c157/3f2da8f514e555f0.jpg',
          title: '三星面板显示屏曲面无边电脑显示器2k高刷超高清护眼电竞液晶屏',
          price: '299.00',
          person: 2000
        },
        {
          image: 'https://img1.360buyimg.com/n6/jfs/t1/158250/5/35438/56982/640ef5c7F3c0a1edd/8863337708023f2c.jpg',
          title: '联想（Lenovo) SSD固态硬盘 512GB M.2接口(NVMe协议) SL700拯救者系列 2280板型',
          price: '269.00',
          person: 602
        },
        {
          image: 'https://img1.360buyimg.com/n6/jfs/t1/166481/14/35009/96373/640ef0b2F1d4ce756/5cbfb7c20948e047.jpg',
          title: '联力 包豪斯MINI纯白色机箱 台式机电脑全透明水冷ATX开放式主机箱2代霓彩线积木风扇机箱电源套装 包豪斯mini 雪白',
          price: '769.00',
          person: 1602
        },
        {
          image: 'https://img1.360buyimg.com/n6/jfs/t1/116744/1/28455/102409/632d0e44E08f66e2e/ce4c5272f3020292.jpg',
          title: '英特尔(Intel) i7-13700K 13代 酷睿 处理器 16核24线程 睿频至高可达5.4Ghz 30M三级缓存 台式机CPU',
          price: '3199.00',
          person: 50
        },
      ]
    }
  },
  methods: {
    detail(item) {
      console.log(item)
      uni.navigateTo({
        url: '/subpages/shop/goodsDetail/goodsDetail'
      })
    }
  }
}
</script>

<style >
.header {
  width: 100%;
  background-image: url('~@/static/index/bg.png');
  background-size: 100% 420rpx;
  background-repeat: no-repeat;
  overflow: hidden;
}
.header__box {
  box-sizing: border-box;
  padding: 0 24rpx;
}
.search {
  width: 100%;
  height: 88rpx;
  background-color: #fff;
  border-radius: 14rpx;
  margin-top: 24rpx;
  color: #333333;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 0 28rpx 0 24rpx;
}
.search > .yd-flex-1 {
  margin-right: 24rpx;
}
.search__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
}
.swiper {
  width: 100%;
  height: 288rpx;
  border-radius: 22rpx;
  overflow: hidden;
  margin-top: 24rpx;
  margin-bottom: 24rpx;
}
.swiper__item, .swiper__image {
  width: 100%;
  height: 100%;
}
.flow-container {
  padding: 0 24rpx;
  overflow: hidden;
}
.item {
  box-sizing: border-box;
  padding: 20rpx;
  color: #999;
  font-size: 24rpx;
}
.item__name {
  font-size: 24rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 10rpx;
  line-height: 1.5;
}
.item__icon {
  width: 60rpx;
  height: 60rpx;
  margin-left: 12rpx;
}
.item__price {
  color: #FD1111;
  font-size: 28rpx;
  margin-bottom: 4rpx;
}
</style>
